<template>
	<view class="container">
		
		<view class="block">
			<view class="line-title">
				<view class="text">我的数据</view>
				<view class="icon-container" @click="handleMore">
					<view class="icon-span">查看更多</view>
					<u-icon name="arrow-rightward" size="14"></u-icon>
				</view>
			</view>
			<view class="myData-container">
				<view class="left">
					<view class="bg"></view>
					<view class="magnetic-field-header">
						<text class="title">下载图像数</text>
					</view>
					<view class="magnetic-field-value">
						<text class="number">{{ total_operation_count.download || 0 }}</text>
					</view>
				</view>
				<view class="right">
					<view class="magnetic-field-container top">
						<view class="bg"></view>
						<view class="magnetic-field-header">
						<text class="title">修复图像数</text>
						</view>
						<view class="magnetic-field-value">
						<text class="number">{{ total_operation_count.repair || 0 }}</text>
						</view>
					</view>
					<view class="magnetic-field-container bottom">
						<view class="bg"></view>
						<view class="magnetic-field-header">
						<text class="title">增强图像数</text>
						</view>
						<view class="magnetic-field-value">
						<text class="number">{{ total_operation_count.enhance || 0 }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getUserOperationCount } from '../../../../api/user.js'
export default {
	data() {
		return {
			system_config: {
				operation_limit: 0,
				download_limit: 0,
			},
			total_operation_count: {},
		}
	},
	methods: {
		fetchUserTodayCount() {
			const userId = this.$store.state.user.userInfo.id
			getUserOperationCount({
				userId: userId,
			}).then(res=>{
				if(res.code==200) {
					this.total_operation_count = res.data;
				}
			})
		},
		// 加载更多
		handleMore() {
			// 加载更多操作数据
			uni.navigateTo({
				url: '/pages/mine/components/UseCount/UseCountList'
			})
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	height: 100%;
	width: 100%;
	
	.block {
		width: 100%;
		min-height: 100px;
		margin-top: 20px;
		z-index: 999;
		.line-title {
			width: 100%;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			.text {
				color: #444444;
				font-weight: bold;
			}
			.icon-container {
				height: 14px;
				display: flex;
				align-items: center;
				font-size: 12px;
			}
		}
		.myData-container {
			display: flex;
			width: 100%;
			margin-top: 10px;
			height: 150px;
			
			.left {
				background: linear-gradient(180deg, #798af9, #8456f9, #8d69ff, #ab70fd);
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
				color: white;
				font-family: Arial, sans-serif;
				border-radius: 10px 50px 10px 10px;
				height: 100%;
				width: 44%;
				display: flex;
				padding: 10px;
				flex-direction: column;
				position: relative;
				overflow: hidden;
				box-sizing: border-box;
				
				.bg {
					height: 100%;
					width: 100%;
					background: url("./images/icon-download.png") right bottom no-repeat;
					background-size: 80% 80%;
					position: absolute;
				}
				
				.title {
					font-weight: 600;
				}
				
				.number {
					font-weight: 600;
					font-size: 30px;
				}
			}
			.right {
				height: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				box-sizing: border-box;
				margin-left: 10px;
				
				.magnetic-field-container {
					background: linear-gradient(90deg, #fea99b, #fea1a8, #fe97b1, #fe88ba);
					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
					color: white;
					font-family: Arial, sans-serif;
					border-radius: 20px 10px;
					height: 50%;
					width: 100%;
					display: flex;
					padding: 10px;
					flex-direction: column;
					position: relative;
					overflow: hidden;
					box-sizing: border-box;
				
					.bg {
						height: 100%;
						width: 100%;
						background: url("./images/hert.png") right bottom no-repeat;
						background-size: 50% 100%;
						position: absolute;
					}
					.title {
						font-weight: 600;
						z-index: 100 ;
					}
					
					.number {
						font-weight: 600;
						font-size: 30px;
					}
				}
				.bottom {
					margin-top: 10px;
					background: linear-gradient(90deg, #ffbe5c, #ffcc6e, #ffb943, #fab762);
					
					.bg {
						height: 100%;
						width: 100%;
						background: url("./images/book.png") right bottom no-repeat;
						background-size: 40% 100%;
						position: absolute;
					}
				}
			}
		}
	}
}
</style>